<template>
    <div class="addadmin" style="width: 1280px;">
        <div class="admin_header">
            <div class="administrator_header">
                <div class="ax_default box_2" id="u9509">
                    <div id="u9509_div"></div>
                </div>
                <span class="header_words">修改密码</span>
            </div>

        </div>
        <div class="add_form">
            <div class="form_header">
                <span class="form_admin">修改密码</span>
            </div>
            <div class="form_news">
                <el-form :model="ruleForm" :rules="rules" label-position="left" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="新密码" prop="pass1">
                        <el-input v-model="pass1"  placeholder="请输入内容" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="密码确认" prop="pass2">
                        <el-input v-model="pass2" placeholder="请输入内容" show-password></el-input>
                    </el-form-item>

                    <el-form-item class="add_btn">
                        <el-button type="primary" @click="changePass">保存</el-button>
                    </el-form-item>
                </el-form>

            </div>

        </div>
        <div class="admin_footer">
            <p><span> © 云和H5 医疗后台项目组</span></p>
        </div>

    </div>
</template>
<script>
import { updataPass, getAllUser } from '@/api/login'
export default {
    name: 'Changepassword',
    data() {
        return {
            pass1: '',
            pass2: '',
            ruleForm: {
                pass1: '',
                pass2: '',
            },
            rules: {
                pass: [
                    { required: true, min: 6, max: 16, message: '请输入6-16位的密码', trigger: 'blur' },
                ],
            }
        }

    },
    methods: {
        async changePass() {
            if (this.pass1.trim() != '' && this.pass2.trim() != '') {
                //密码正则，6到16位（字母，数字，下划线，减号）
                const reg_pass = /^[a-zA-Z0-9_-]{6,16}$/

                if(
                    reg_pass.test(this.pass1.trim()) && 
                    reg_pass.test(this.pass2.trim()) &&
                    this.pass1.trim() == this.pass2.trim()
                    ){

                    let _name = this.$store.state.userName
                    let _userArr = await getAllUser()
                    _userArr.data.forEach(async item => {
                        if (item.account == _name) {
                           await updataPass(item.id, this.pass1.trim())
                        }
                    });

                    this.$message({
                        message: "修改成功，请重新登录",
                        type: "success"
                    })

                    this.$store.dispatch('noLogin')
                    this.$router.push('/login')

                }else{
                    this.$message({
                        message: "请输入6到16位（字母，数字，下划线，减号）的密码并且两次密码保持一致",
                        type: "error"
                    })
                }


            } else {
                this.$message({
                    message: "请不要输入空的密码",
                    type: "error"
                })
            }


        }

    },
    // 进入组件前的 组件内部路由守卫
    beforeRouteEnter(to, from, next) {
        const _isLogin = JSON.parse(localStorage.getItem('isLogin'))
        // this.fromUrl = from.path
        if (_isLogin) {
            next()
        } else {
            next('/login')
        }
    },
}
</script>
<style lang="scss" scoped>
.addadmin {
    margin: 0 auto;
}

.admin_header {
    display: flex;
    justify-content: space-between;
}

.administrator_header {
    display: flex;
    align-items: center;
}

#u9509 {
    border-width: 0px;
    width: 24px;
    height: 8px;
    display: flex;
    font-size: 16px;
    color: #006EFF;

}

#u9509_div {
    border-width: 0px;
    width: 24px;
    height: 8px;
    background: inherit;
    background-color: rgba(0, 110, 255, 1);
    border: none;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 16px;
    color: #006EFF;
}

.header_words {
    margin-left: 20px;
    font-size: 24px;
}

.add_form {
    box-shadow: 0 0 20px #ccc;
    border-radius: 10px;
    margin-top: 20px;
    background-color: #fff;
}

.demo-ruleForm {
    width: 420px;
}

.form_header {
    border-radius: 10px 10px 0 0;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    background-color: rgba(242, 242, 242, 1);
    padding-left: 20px;
}

.form_admin {
    display: inline-block;
    color: #006EFF;
}

.form_news {
    padding: 20px 50px;
}



.el-button {
    padding: 12px 50px;
    font-size: 14px;
}

.add_btn {
    margin-top: 50px;
}

.admin_footer {
    height: 64px;
    line-height: 64px;
}

.admin_footer p {
    text-align: center;
    font-size: 12px;
    color: #ccc;
}

.admin_footer p span:hover {
    cursor: pointer;
    color: rgb(0, 110, 255);
}
</style>